 <template>
   <div class="main-container">
     <div class="header">
       <h1>权限日志</h1>
        <div class="filter">
           <label>过滤：</label>
           <select v-model="selectedFilter" @change="fetchLogs">
                <option value="lastMonth">最近一个月</option>
              <option value="lastWeek">最近一周</option>
                <option value="all">全部</option>
            </select>
        </div>
     </div>
      <div class="info">
          <div class="info-table">
               <table>
                   <thead>
                     <tr>
                       <th style="width: 120px;">姓名</th>
                       <th style="width: 240px;">手机号</th>
                      <th style="width: 280px;">工号</th>
                        <th style="width: 100px;">类型</th>
                     <th style="width: 280px;">授权时间</th>
                    </tr>
                   </thead>
                 <tbody>
                      <tr v-for="(item, index) in currentPageData" :key="index">
                        <td>{{ item.name }}</td>
                         <td>{{ item.phone }}</td>
                         <td>{{ item.num }}</td>
                          <td :style="getTypeStyle(item.type)">{{ item.type }}</td>
                        <td>{{ formatDateTime(item.smsTime) }}</td>
                     </tr>
                </tbody>
               </table>
            </div>
        </div>
       <div class="footer">
           <el-button type="primary" :disabled="currentPage === 1" @click="changePage(currentPage - 1)" icon="el-icon-arrow-left"></el-button>
           <span> 第 {{ currentPage }}/{{ totalPages }}页 </span>
          <el-button type="primary" :disabled="currentPage === totalPages" @click="changePage(currentPage + 1)" icon="el-icon-arrow-right"></el-button>
        </div>
     </div>
 </template>

 <script>
  import axios from 'axios';

   export default {
       data() {
           return {
                input: '',
               selectedFilter: 'all',
                currentPage: 1,
               pageSize: 5,
               totalItems: 0,
                data: [],
               originalData:[],
           };
       },
        methods: {
            changePage(page) {
                if (page < 1 || page > this.totalPages) return;
               this.currentPage = page;
                this.fetchLogs();
             },
        handleSearch() {
             if(!this.input){
               this.data=this.originalData;
                 return;
            }
            const searchValue = this.input.toLowerCase();
              this.data = this.originalData.filter(item =>
                item.name.toLowerCase().includes(searchValue) ||
               String(item.jobNum).includes(searchValue) ||
                 item.phone.includes(searchValue)
              );
          },
        formatDateTime(timestamp) {
            if(!timestamp) return '';
             const date = new Date(timestamp); // 将时间戳转换为 Date 对象
              const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
              const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
           const minutes = String(date.getMinutes()).padStart(2, '0');
              const seconds = String(date.getSeconds()).padStart(2, '0');
              return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
          },
         getTypeStyle(type) {
              if (type === '启用') {
                  return { color: 'green' }; // 状态为正常时显示绿色
             } else if (type === '禁用') {
                   return { color: 'red' }; // 状态为禁用时显示红色
             }
                return {}; // 默认样式
           },
       async fetchLogs() {
             try {
                 const response = await axios.post('/auth/log/list',{
                    filter: this.selectedFilter,
                    pageNum: this.currentPage,
                     pageSize: this.pageSize
                   });
                 if(response.data){
                    this.data = response.data.logList;
                    this.totalItems = response.data.total;
                    console.log(this.data);
                    this.originalData = [...this.data]
                  }else{
                       this.data = [];
                       this.totalItems = 0;
                  }
                } catch (error) {
                    console.error('Error fetching logs:', error);
               }
          },
      },
      computed: {
       totalPages() {
            return Math.ceil(this.totalItems / this.pageSize);
         },
        currentPageData() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.data.slice(start, end);
       },
      },
      mounted() {
           this.fetchLogs();
      },
    watch: {
        currentPage: 'fetchLogs'
      }
   };
</script>
<style scoped>
    .main-container {
        padding: 20px;
       background-color: #f0f5ff;
     }

      h1 {
         font-size: 64px;
         font-weight: bold;
    }
    .info-table table {
        width: 80%;
       border-collapse: collapse;
       margin: auto;
    }

  .info-table th,
     .info-table td {
         padding: 10px;
       text-align: left;
    }

  .info-table th {
      background-color: #f2f2f2;
      color: #4578dc;
    }
    select {
      margin-left: 10px;
       padding: 5px;
       font-size: 14px;
        border-radius: 5px;
        border: 1px solid #ccc;
   }
    .switchs {
        text-align: left;
    }
   .footer {
        font-size: 24px;
        position: fixed;   /* 固定位置 */
       bottom: 60px;      /* 离底部 60px */
        left: 50%;         /* 水平居中 */
      transform: translateX(-50%);  /* 精确居中 */
      background-color: #fff;   /* 背景色，避免与内容重叠 */
        padding: 10px;
       border-radius: 5px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* 为按钮添加阴影效果 */
     z-index: 10;  /* 确保按钮在最上层 */
    }
   .search {
        display: flex;          /* 使用 Flexbox 布局 */
     align-items: center;    /* 垂直居中对齐 */
    }

   .search label {
      margin-right: 10px;     /* 给 label 添加右边距，确保与输入框有间隔 */
   }

    .search .el-input {
       width: 300px;           /* 设置输入框的宽度 */
     }

   .search .el-button {
     margin: 10px 30px;
  }
  </style>